<template>
	<view class="page">
		<scroll-view>
			<cu-custom bgColor="bg-gradual-pink" :isBack="false">
				<block slot="content">首页</block>
			</cu-custom>
			<!-- 轮播 -->
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
				<swiper-item v-for="(item,index) in noticeData" :key="index" @click="gonotice(item.id)">
					<image :src="item.icon" mode="aspectFit"></image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>

			<!-- 常用服务 -->
			<view class="cu-bar bg-blue solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-red'></text>常用服务
				</view>
			</view>

			<view class="cu-list grid col-3 text-sm">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
					v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)"
					v-if="item.role.indexOf(role)>-1">
					<view class="padding text-center">
						<image :src="item.icon" style="width:28px;height:28px;">
							<view class="cu-tag badge margin-top-sm" style="margin-left:1.2em"
								v-if="getTtemDotInfo(item)">
								<block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
							</view>
						</image>
						<view class="margin-top-xs">{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- 待办 -->
			<view v-if="role != 'linkman'">
				<view class="cu-bar bg-blue solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
					<view class="action">
						<text class='cuIcon-title text-orange'></text>待办事项
					</view>
				</view>
				<view class="searchButton">
					<view class="input">
						<input class="inputtext" placeholder="请输入标题" v-model="dangerDesc" type="text" />
					</view>
					<view class="button">
						<button @click="searchdai" type="primary" plain="true"
							class="mini-btn border cu-btn bg-blue shadow" size="mini">搜索</button>
						<!-- <button type="primary" plain="true">按钮</button> -->
					</view>
				</view>
				<view class="list">
					<view class="h-table">
						<view class="h-tr h-tr-2 h-thead">
							<view class="h-td three">状态</view>
							<view class="h-td seven">场所</view>
						</view>
						<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true"
							class="scrollHeight">
							<view class="shequcontent" v-if="daibanTabel.length != 0">
								<view class="listdetail">
									<!-- <view class="h-tr h-tr-2" v-for="(items,index) in daibanTabel" :key="index">
										<view class="title" @click="godetail(items.list[0],0)">{{items.placeName}}({{items.placeCode}})</view>
										<view class="block flex border" v-for="(item,index1) in items.list" :key="index1" @click="godetail(item,1)">
											<view class="sevenLeft">{{item.statusText}}</view>
											<view class="sevenRight">
												<view class="line-clamp">
													{{item.title}}
												</view>
											</view>
										</view>
									</view> -->
									<view class="h-tr h-tr-2" v-for="(items,index) in daibanTabel" :key="index"
										@click="godetail(items,1)">
										<view class="block flex border">
											<view class="sevenLeft">{{items.statusText}}</view>
											<view class="sevenRight">
												<view class="line-clamp">
													{{items.placeName}}({{items.placeCode}})
												</view>
											</view>
										</view>
									</view>
								</view>


							</view>
						</scroll-view>
						<view class="loadingType">{{loadingType == true ?'没有更多数据了!' : '上拉显示更多'}}</view>
						<!-- <view class="flex flex-direction padding">
							<button class="cu-btn bg-red shadow" @tap="lowerBottom" type="warn" plain="true">{{loadingType == true ?'没有更多数据了!' : '点击显示更多'}}</button>
						</view> -->
					</view>
				</view>
			</view>



			<view v-if="role != 'client'">
				<!-- 其他服务 -->
				<view class="cu-bar bg-blue solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
					<view class="action">
						<text class='cuIcon-title text-yellow'></text>排查统计
					</view>
				</view>
				<view class="searchButton" v-if="role != 'linkman'">
					<view class="label">所属地区：</view>
					<view class="suoshu">
						<uni-data-picker v-if="communityaddress == ''" @change="changeteeList" @nodeclick="onnodeclick" @popupclosed="popupclosed" self-field="code" :step-searh="true" :border="false"
							v-model="community" :localdata="queryTreeList" :map="{text:'departName',value:'id'}"
							popup-title="请选择类型"></uni-data-picker>
							<view v-if="communityaddress != ''" class="datapickertext">{{communityaddress}}</view>
					</view>
					<view class="button">
						<button @click="clickreset" type="primary" plain="true"
							class="mini-btn border cu-btn bg-blue shadow" size="mini">重置</button>
						<!-- <button type="primary" plain="true">按钮</button> -->
					</view>
				</view>
				<!-- 菜单栏选项卡 -->
				<view class="gatenav">
					<Naswipernav ref="naswipernav"></Naswipernav>
				</view>
			</view>
			<!-- <view class="cu-tabbar-height margin<!-- -top"></view> -->

			<!-- 参考资料 -->
			<view class="cu-bar bg-blue solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-red'></text>参考资料
				</view>
			</view>

			<view class="cu-list grid">
				<view class="newsTitle">
					<view class="ul">
						<view class="li" :style="[{animationDelay: (index + 1)*0.05 + 's'}]"
							v-for="(item,index) in referencesData" :key="index" @tap="getFile(item)">
							<view class="icon-huo"></view>
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>



		</scroll-view>
	</view>
</template>

<script>
	import {
		uslist,
		os
	} from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
	import Naswipernav from '../component/naswipernav.vue'
	import server from '@/api/server.js'
	import {
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	export default {
		name: 'gateway',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler: function(val, oldVal) {
					console.log('cur', val, oldVal, '111111111111111111111111111111')
					this.initMenu()
				},
			},
		},
		data() {
			return {
				role: 'admin',
				placeData: [],
				referencesData: [],
				dangerDesc: '',
				queryTreeList: [],
				daibanTabel: [],
				community: '',
				swiperList: [{
						id: 1,
						type: 'image',
						url: 'https://www.xiaofang.gyxfpx.com/fire/sys/common/static/blue.png',
						link: ''
					},
					{
						id: 2,
						type: 'image',
						url: 'https://www.xiaofang.gyxfpx.com/fire/sys/common/static/blue.png',
						link: ''
					},
				],
				middleApps: [{
						icon: 'line2_icon1.png',
						title: '审批',
						'text': '个人审批'
					},
					{
						icon: 'line2_icon2.png',
						title: '审批稿',
						'text': '审批草稿箱'
					},
				],
				usList: uslist.data,
				osList: os.data,
				msgCount: 0,
				dot: {
					mailHome: false
				},
				loadingType: false,
				loading: false,
				communityaddress:'',
				copyaddress:'',
				params: {
					title: '',
					pageNo: 1,
					pageSize: 10,
				},
				noticeData: [],
			}
		},
		watch: {
		            '$route': function(newroute, oldroute) {
		                console.log(newroute, oldroute);
		                //可以在这个函数中获取到当前的路由规则字符串是什么
		                //那么就可以针对一些特定的页面做一些特定的处理
		            }
		        },
		mounted() {
			this.getnoticelist() //公告列表
			this.getinto() //排查统计
			this.searchdai()
			this.getreferenceslist() //参考资料
		},
		methods: {
			...mapActions(["permissionControl"]),
			clickreset(){
				this.community = ''
				this.communityaddress = ''
				// this.getinto()
			},
			//参考资料
			getreferenceslist() {
				server.referenceslist().then(res => {
					console.log(res)
					this.referencesData = res.data.result
				})
			},
			//跳转到公告详情
			gonotice(id) {
				console.log(id)
				uni.navigateTo({
					// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/gateway/noticedetail?id=' + id
				})
			},
			getnoticelist() {
				server.noticelist().then(res => {
					console.log(res)
					this.noticeData = res.data.result
				})
			},
			lowerBottom() {
				console.log(1111)
				this.getagendalist();
			},
			getinto() {
				this.role = this.$store.getters.role
				if (this.role != 'client') {
					if (this.role == 'linkman') {
						this.community = this.$store.getters.userinfo.departIds
						this.getchangeTab()
					} else {
						this.getqueryTreeList()
					}
				}
				console.log(this.$store.getters.userinfo, 'this.rolethis.rolethis.rolethis.rolethis.rolethis.role')
				if (this.role == '' || this.role == null) {
					this.$tip.toast('权限未识别，重新登录！');
					this.$Router.replaceAll({
						name: 'login'
					})
					// window.location.reload()
					// this.$store.dispatch('Logout').then(() => {
					// 	window.location.reload()
					// })
				}
			},
			godetail(items, index) {
				if (items.type == 1) {
					if (index == 1) {
						uni.navigateTo({
							// ? 后面加要传的参数， 多个参数用 & 隔开 
							// url: '/pages/siteinvestigation/detail?id=' + items.placeId + '&objectId=' + items.objectId
							url: '/pages/siteinvestigation/detail?id=' + items.placeId
						})
					} else {
						uni.navigateTo({
							// ? 后面加要传的参数， 多个参数用 & 隔开 
							url: '/pages/siteinvestigation/detail?id=' + items.placeId
						})
					}

				} else {
					console.log('22222222222222222222')
					if (index == 1) {
						uni.navigateTo({
							// ? 后面加要传的参数， 多个参数用 & 隔开 
							url: '/pages/education/detail?id=' + items.placeId + '&objectId=' + items.objectId
						})
					} else {
						uni.navigateTo({
							// ? 后面加要传的参数， 多个参数用 & 隔开 
							url: '/pages/education/detail?id=' + items.placeId
						})
					}

				}

			},
			searchdai() {
				this.params.pageNo = 1
				this.daibanTabel = []
				this.loadingType = false
				this.getagendalist()
			},
			getagendalist() {
				this.loading = true
				this.params.title = this.dangerDesc
				server.agendalist(this.params).then(res => {
					console.log(res)
					if (res.data.success) {
						this.loading = false
						if (res.data.result.records.length == 0) { //没有数据
							this.loadingType = true;
							return;
						}
						if (res.data.result.total <= 5) {
							this.loadingType = true;
						}
						// this.daibanTabel = res.data.result.records
						this.params.pageNo++; //每触底一次 page +1
						this.daibanTabel = this.daibanTabel.concat(res.data.result.records); //将数据拼接在一起
					}
				})
			},
			getqueryTreeList() {
				var that = this
				server.queryTreeList({
					category: 6
				}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
						if (this.queryTreeList != null && this.queryTreeList.length > 0) {
							this.community = this.queryTreeList[0].id
							if (this.queryTreeList[0].children != null && this.queryTreeList[0].children
								.length > 0) {
								this.community = this.queryTreeList[0].children[0].id
								if (this.queryTreeList[0].children[0].children != null && this
									.queryTreeList[0].children[0].children.length > 0) {
									this.community = this.queryTreeList[0].children[0].children[0].id
									if (this.queryTreeList[0].children[0].children[0].children != null &&
										this.queryTreeList[0].children[0].children[0].children.length > 0
									) {
										this.community = this.queryTreeList[0].children[0].children[0]
											.children[0].id
									}
								}
							}
						}
						that.getchangeTab()
					});

				})
			},
			// changeunity(e){
			// 	console.log(e,'000000000000000000000000',this.community)
			// 	this.getchangeTab()
			// },
			// 点击最后地区执行完
			changeteeList(e){
				console.log('changeteeList',e)
				this.communityaddress = this.copyaddress + e.detail.value[e.detail.value.length - 1].text
				this.$forceUpdate()
			},
			onnodeclick(node) {
				console.log('node.id',node)
				console.log('node.address',node.address)
				this.copyaddress =  node.address
				this.$refs.naswipernav.changeTab(0, node.id)
				
			},
			// 关闭弹出层
			popupclosed(){
				console.log('123452345y6545778656i876543')
				this.communityaddress = this.copyaddress
				// this.getchangeTab()
			},
			getchangeTab() {
				this.$refs.naswipernav.changeTab(0, this.community)
			},
			getFile(item) {
				console.log(item, '222222222222222222222222')
				var splitc = item.fileUrl.split('.')
				var type = splitc[splitc.length - 1]
				console.log(type)
				console.log(splitc)
				if (/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(splitc)) {
					// 预览图片单张
					let _this = this;
					let imgsArray = [];
					imgsArray[0] = item.fileUrl
					uni.previewImage({
						current: 0,
						urls: imgsArray
					});
					return
				}
				var data = item.fileUrl
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				wx.downloadFile({
					url: data,
					success: function(res) {
						console.log(res, '3333333333333333333333333333333333')
						uni.hideLoading()
						var filePath = res.tempFilePath;
						uni.showLoading({
							title: '正在打开',
							mask: true
						})
						wx.openDocument({
							filePath: encodeURI(filePath),
							fileType: type,
							showMenu: true,
							success: function(res) {
								uni.hideLoading()
								console.log('打开文档成功');
							},
							fail: function(err) {
								uni.hideLoading()
								console.log('fail:' + JSON.stringify(err));
							}
						});
					},
					fail: function(err) {
						uni.hideLoading()
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},

			initMenu() {
				console.log("-----------home------------")
				this.onSocketOpen()
				this.onSocketReceive()
				this.loadCount(0);
			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this = this
				socket.acceptMessage = function(res) {
					// console.log("页面收到的消息", res);
					if (res.cmd == "topic") {
						//系统通知
						_this.loadCount('1')
					} else if (res.cmd == "user") {
						//用户消息
						_this.loadCount('2')
					} else if (res.cmd == 'email') {
						//邮件消息
						_this.loadEmailCount()
					}
				}
			},
			loadCount(flag) {
				console.log("loadCount::flag", flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						let msg1Count = res.data.result.anntMsgTotal;
						let msg2Count = res.data.result.sysMsgTotal;
						this.msgCount = msg1Count + msg2Count
						console.log("this.msgCount", this.msgCount)
					}
				})
			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			}
		},
		components: {
			Naswipernav
		}
	}
</script>

<style scoped lang="scss">
	.cu-list.grid>.cu-item {
		padding: 0px 0px;
	}

	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.newsTitle {
		padding: 0 10px 10px 10px;

		.h6 {
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.ul .li {
			display: flex;
			align-items: center;
			line-height: 30px;

			text {
				margin-left: 5px;
				font-size: 16px;
				overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 1;
			    line-clamp: 1;
			    -webkit-box-orient: vertical;	
			}
		}
	}

	uni-page-body,
	.gateway {
		padding-bottom: 100px;
	}

	.list {
		width: 100%;
		padding: 5px;
		background: #e9e9e9;
	}

	.h-table .shequcontent .h-tr {
		display: unset;
		float: left;
		width: 100%;

		.title {
			border-color: #6cd7f7;
			padding: 5px 4px;
			padding-left: 20px;
			font-size: 14px;
			font-weight: bold;
			color: #555;
		}
	}

	.h-table .h-tr-2>.h-td.three {
		width: 20%;
	}

	.h-table .h-tr-2>.h-td.seven {
		width: 80%;
	}

	.h-table .h-tr-2>.padding {
		padding: 4px;
	}

	.h-table .h-tr-2>.border {
		border-top: 1px solid #e9e9e9;
	}

	.h-table .h-tr-2>.center {
		text-align: center;
	}

	.h-table .line-clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.h-table .h-tr-2>.block {
		width: 100%;

		.sevenLeft {
			width: 20%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			box-sizing: border-box;
			padding: 3px;
			word-break: break-all;
			border-color: #e9e9e9;
			border-style: solid;
			border-width: 0;
			border-right-width: 1px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			min-height: 36px;
		}

		.sevenRight {
			width: 80%;
			height: 40px;
			display: flex;
			align-items: center;
			font-size: 14px;
			padding: 0 8px;
		}
	}

	.h-table .h-tr-2>.h-td.seven.center {
		text-align: center;
		display: inline-flex;
	}

	/deep/.bg-gradual-pink {
		background-image: linear-gradient(45deg, #ffffff, #ffffff);
		color: #333333;
	}

	.shequcontent {
		max-height: 350px;
		float: left;
		width: 100%;
	}
	.suoshu{
		width: calc(100% - 150px);
	}
	.datapickertext{
		overflow-x: auto;
		white-space: nowrap;
		padding-right: 10px;
		width: 100%;
	}
	/deep/.screen-swiper{
		background: white;
	}
</style>
